<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>发布房源</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/module/admin.css?v=318"/>
    <link href="${pageContext.request.contextPath}/static/images/houserent.ico" rel="icon">
    <style>
        #landHouseInfo {
            max-width: 500px;
            margin: 30px auto;
        }

        #landHouseInfo .layui-form-item {
            margin-bottom: 25px;
        }
    </style>
</head>
<body onscroll="layui.admin.hideFixedEl();" class="theme-pink close-footer">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" id="landHouseInfo" lay-filter="landHouseInfo">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">房屋名:</label>
                    <div class="layui-input-block">
                        <input name="houseName" placeholder="请输入房屋名" class="layui-input"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <input type="hidden" name="houseStatus" value="7">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">月租金:</label>
                    <div class="layui-input-block">
                        <input type="number" name="housePrice" placeholder="请输入月租金" class="layui-input"
                               lay-verType="tips" lay-verify="required|number" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">房产证号:</label>
                    <div class="layui-input-block">
                        <input name="houseIdCard" placeholder="请输入房产证号" class="layui-input"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">房屋地址:</label>
                    <div class="layui-input-block">
                        <input name="houseAddress" placeholder="请输入房屋地址" class="layui-input"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">租赁类型:</label>
                    <div class="layui-input-block">
                        <select name="houseType" lay-verType="tips" lay-verify="required" required>
                            <option value="">请选择租赁类型</option>
                            <option value="8">整租</option>
                            <option value="9">合租</option>
                        </select>
                    </div>
                </div>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="houseImgs">上传房屋图片(可选择多张图片)</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="houseImg"></div>
                    </blockquote>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-filter="landHouseInfo" lay-submit style="background-color: #009688;">&emsp;提交&emsp;</button>
                        <button id="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/common.js?v=318"></script>
<script>
    layui.use(['layer', 'form', 'laydate', 'upload', 'element'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var element = layui.element;

        var houseImg = "";
        //房屋图片上传
        upload.render({
            elem: '#houseImgs'
            ,url: '${pageContext.request.contextPath}/house/houseimg'
            ,before: function(obj){
                obj.preview(function(index, file, result){
                    $('#houseImg').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="height: 70px">')
                });
            }
            ,done: function(res){
                if (res.code == 0){
                    houseImg = houseImg + "," +res.msg;
                }
            }
        });
        /* 监听表单提交 */
        form.on('submit(landHouseInfo)', function (data) {
            data.field.houseImg = houseImg;
            if (data.field.houseImg === ""){
                layer.msg('未上传房屋图片');
                return false;
            }
            $.ajax({
                url:'${pageContext.request.contextPath}/house/addhouse',
                data: data.field,
                dataType:'json',
                type:'post',
                success:function (res) {
                    if(res.code == 0){
                        layer.msg(res.msg,{icon:6},function () {
                            houseImg = "";
                            window.location.reload();
                        })
                    }else{
                        layer.msg(res.msg,{icon:5});
                    }
                },
                error:function () {
                    layer.msg('请求失败');
                }
            })
            return false;
        });

        $("#reset").click(function () {
            window.location.reload();
        })

    });
</script>
</body>
</html>